import { defineComponent, reactive } from "vue";
import _ from "lodash";
export default defineComponent({
  props: {
    content: {
      type: Object,
      required: true,
    },
  },
  emits: ['click-pop', 'click-close-icon', 'open', 'close', 'opened', 'closed', 'click-overlay'],
  setup(props, { slots, expose, emit }) {
    const config_default = {};
    const state = reactive({
      isShow: false,
      name: '',
      config: _.cloneDeep(config_default) as any,
    });
    // 打开弹窗
    const open = (name: string, config: any) => {
      state.name = name;
      Object.entries(config || {}).forEach((item: any, index: number) => {
        state.config[item[0]] = item[1];
      })
      state.isShow = true;
    }
    // 关闭弹窗
    const close = () => {
      state.isShow = false;
    }
    // 弹窗关闭后
    const closed = () => {
      state.name = '';
      state.config = _.cloneDeep(config_default);
      emit('closed');
    }
    expose({
      open,
      close,
    })
    return () => (
      <nut-popup
        v-model:visible={state.isShow}
        {...state.config}
        onClickPop={() => { emit('click-pop') }}
        onClickCloseIcon={() => { emit('click-close-icon') }}
        onOpen={() => { emit('open') }}
        onClose={() => { emit('close') }}
        onOpened={() => { emit('opened') }}
        onClickOverlay={() => { emit('click-overlay') }}
        onClosed={() => { closed() }}
      >
        {Object.entries(props.content).map((item: any, index: number) => (
          item[0] === state.name && item[1]()
        ))}
      </nut-popup>
    )
  }
})